<template>
	<div class="progressBox">
		<div class="rela font-12" :style="{color:titleColor}">
			<div class="rela titleBox" v-if="title!=''">
				<div class="title text-gray font-14 text-cut">
					{{title}}
				</div>
				<span class="abso font-18">{{number}} <span class="font-14">件</span></span>
			</div>
		</div>
		<div class="rela">
			<el-progress :percentage="percentage" :show-text="showtext" :stroke-width="strokeWidth"></el-progress>
			<div class="abso progressSign bg-white" :style="{left:percentage-roundLeft+'%'}" v-if="percentage>=roundLeft">
				<div class="round"></div>
			</div>
			<div class="abso progressSign bg-white" :style="{left:percentage+'%'}" v-else>
				<div class="round"></div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			title: {
				type: String,
				default: ''
			},
			percentage: {
				type: Number,
				default: 0
			},
			number: {
				type: Number,
				default: 0
			},
			showtext: {
				type: Boolean,
				default: false
			},
			strokeWidth: {
				type: Number,
				default: 0
			},
			titleColor: {
				type: String,
				default: ''
			},
			roundLeft: {
				type: Number,
				default: 0
			}
		}
	}
</script>

<style lang="less" scoped>
	.progressBox{
		.titleBox{
			.title{
				width: 85%;
			}
			span{
				right: 0;
				top: 0;
				color: #2f82ed;
				span{
					color: #666666;
				}
			}
		}
		.el-progress{
			margin-top: 6px;
		}
		.progressSign{
			width: 18px;
			height: 18px;
			border-radius: 100%;
			top: 50%;
			transform: translateY(-50%);
			.round{
				width: 100%;
				height: 100%;
				border: 5px solid #b7ebe2;
				border-radius: 100%;
			}
		}
	}
</style>
